<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	
	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
		<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  
              
		<p:dialog modal="true" widgetVar="statusDialog" showHeader="false"   
		        draggable="false" closable="false">  
		    <p:graphicImage value="/resources/styles/images/ajax-loading-bar.gif" />  
		</p:dialog> 
		<h:form>
			<h:outputText value="Employee Attendance" styleClass="outputTextTitle" />
			<h:panelGrid columns="4" style="width: 650px; "  columnClasses="gridCellButtomLeftAligned, gridCellButtomLeftAligned, gridCellButtomLeftAligned">
				<h:panelGroup>
					<h:outputText value="Select Year" />
					<br />
					<p:selectOneMenu id="yearMenu" value="#{attendanceBean.selectedYear}" styleClass="selectOneMenu168pxFixedWidth">
						<f:selectItems value="#{attendanceBean.yearsMap}" />
					</p:selectOneMenu>
					<p:watermark for="yearMenu" value="Select Year" /> 
				</h:panelGroup>

				<h:panelGroup>
					<h:outputText value="Select Month" />
					<br />
					<p:selectOneMenu id="monthMenu" value="#{attendanceBean.selectedMonth}" styleClass="selectOneMenu168pxFixedWidth">
						<f:selectItems value="#{attendanceBean.monthsMap}" />
					</p:selectOneMenu>
					<p:watermark for="monthMenu" value="Select Month" />
				</h:panelGroup>
				
				<h:panelGroup>
					<h:outputText value="Select Module" />
					<br />
					<p:selectOneMenu id="moduleMenu" value="#{attendanceBean.selectedModule}" styleClass="selectOneMenu168pxFixedWidth">
						<f:selectItem itemLabel="" itemValue="" />
						<f:selectItems value="#{attendanceBean.modulesMap}" />
					</p:selectOneMenu>
					<p:watermark for="moduleMenu" value="Select Module" />
				</h:panelGroup>

				<h:panelGrid style="padding-top: 12px; ">
					<p:commandButton value="View"	actionListener="#{attendanceBean.searchActionListener}" update="@form" />
				</h:panelGrid>
			</h:panelGrid>

				<h:panelGrid style="width: 100%">
				<p:commandButton value="Download as excel file" ajax="false" rendered="#{attendanceBean.RENDERTABLE}" style="float: right;"> 
				 	<p:dataExporter  type="xls" target="attendanceTable" fileName="ATD-#{attendanceBean.selectedMonth}-#{attendanceBean.selectedYear}" />  
		        </p:commandButton>
		        </h:panelGrid>
			
				<p:dataTable id="attendanceTable" value="#{attendanceBean.employeeAttendances}" var="attendance"  paginator="true" rows="16"  rendered="#{attendanceBean.RENDERTABLE}" paginatorPosition="bottom">
					<p:column>
						<f:facet name="header">
							<h:outputText value="Employee" />
						</f:facet>
						<h:outputText value="#{attendance.employee.employeeCode}" />
					</p:column>
					
					<p:column >
						<f:facet name="header">
							<h:outputText value="1" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[0]}" style="#{attendance.styles[0]}" />
					</p:column>
					
					<p:column >
						<f:facet name="header">
							<h:outputText value="2" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[1]}" style="#{attendance.styles[1]}"/>
					</p:column>
					
					<p:column >
						<f:facet name="header">
							<h:outputText value="3" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[2]}" style="#{attendance.styles[2]}"/>
					</p:column>
					<p:column >
						<f:facet name="header">
							<h:outputText value="4" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[3]}" style="#{attendance.styles[3]}"/>
					</p:column>
					<p:column >
						<f:facet name="header">
							<h:outputText value="5" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[4]}" style="#{attendance.styles[4]}" />
					</p:column>
					<p:column >
						<f:facet name="header">
							<h:outputText value="6" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[5]}" style="#{attendance.styles[5]}" />
					</p:column>
					<p:column >
						<f:facet name="header">
							<h:outputText value="7" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[6]}" style="#{attendance.styles[6]}" />
					</p:column>
					<p:column >
						<f:facet name="header">
							<h:outputText value="8" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[7]}" style="#{attendance.styles[7]}" />
					</p:column>
					<p:column >
						<f:facet name="header">
							<h:outputText value="9" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[8]}" style="#{attendance.styles[8]}" />
					</p:column>
					<p:column >
						<f:facet name="header">
							<h:outputText value="10" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[9]}" style="#{attendance.styles[9]}" />
					</p:column>
					<p:column >
						<f:facet name="header">
							<h:outputText value="11" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[10]}" style="#{attendance.styles[10]}" />
					</p:column>
					<p:column >
						<f:facet name="header">
							<h:outputText value="12" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[11]}" style="#{attendance.styles[11]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="13" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[12]}" style="#{attendance.styles[12]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="14" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[13]}" style="#{attendance.styles[13]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="15" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[14]}" style="#{attendance.styles[14]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="16" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[15]}" style="#{attendance.styles[15]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="17" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[16]}" style="#{attendance.styles[16]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="18" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[17]}" style="#{attendance.styles[17]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="19" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[18]}" style="#{attendance.styles[18]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="20" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[19]}" style="#{attendance.styles[19]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="21" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[20]}" style="#{attendance.styles[20]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="22" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[21]}" style="#{attendance.styles[21]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="23" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[22]}" style="#{attendance.styles[22]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="24" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[23]}" style="#{attendance.styles[23]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="25" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[24]}" style="#{attendance.styles[24]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="26" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[25]}" style="#{attendance.styles[25]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="27" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[26]}" style="#{attendance.styles[26]}" />
					</p:column><p:column >
						<f:facet name="header">
							<h:outputText value="28" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[27]}" style="#{attendance.styles[27]}" />
					</p:column><p:column rendered="#{(attendanceBean.NO_OF_DAYS >= 29) }">   
						<f:facet name="header">
							<h:outputText value="29" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[28]}" style="#{attendance.styles[28]}" />
					</p:column><p:column rendered="#{(attendanceBean.NO_OF_DAYS >= 30) }">
						<f:facet name="header">
							<h:outputText value="30" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[29]}" style="#{attendance.styles[29]}" />
					</p:column><p:column rendered="#{(attendanceBean.NO_OF_DAYS >= 31) }">
						<f:facet name="header">
							<h:outputText value="31" />
						</f:facet>
						<h:outputText value="#{attendance.attendances[30]}" style="#{attendance.styles[30]}" />
					</p:column>
					
					
				</p:dataTable>
				 <p:commandButton value="Download as excel file" ajax="false" rendered="#{attendanceBean.RENDERTABLE}" style="float: right;"> 
				 	<p:dataExporter  type="xls" target="attendanceTable" fileName="ATD-#{attendanceBean.selectedMonth}-#{attendanceBean.selectedYear}" />  
		        </p:commandButton>
			
			<p:growl></p:growl>
			
		</h:form>
	</ui:define>
</ui:composition>

